import { useModel } from '@@/plugin-model';
import { AlertComponent, render as renderAmis, ToastComponent } from 'amis';
import 'amis/lib/helper.css';
import 'amis/lib/themes/cxd.css';
import 'amis/sdk/iconfont.css';
import { Modal } from 'antd';
import { useEffect } from 'react';
import '../scss/sql-edit-form.scss';

const RuleScriptNodeEditForm = (props: any) => {
  const { fetcher, notify, alert, copy } = useModel('amisEnv');

  let amisJSON = {
    type: 'form',
    title: null,
    resetAfterSubmit: true,
    onFinished: () => {
      props.ok();
      props.handleRsnEditFormOpen(false);
    },
    api: {
      method: props.editType === 'add' ? 'post' : 'put',
      url: `/ruleScriptNode/${props.editType}`,
    },
    data: {
      ...props.values,
      scriptData: props.values.scriptData ? props.values.scriptData : '',
      pageId: props.pageId,
    },
    body: [
      {
        type: 'group',
        body: [
          {
            type: 'input-text',
            required: true,
            name: 'scriptId',
            label: '脚本标识',
            // "disabled":props.editType==='edit'
          },
          {
            type: 'input-text',
            required: true,
            name: 'scriptName',
            label: '脚本名称',
          },
          {
            label: '节点类型',
            type: 'select',
            required: true,
            name: 'scriptType',
            options: [
              {
                label: '普通节点',
                value: 'script',
              },
              {
                label: '选择节点',
                value: 'switch_script',
              },
              {
                label: '条件节点',
                value: 'if_script',
              },
              {
                label: '数量循环节点',
                value: 'for_script',
              },
              {
                label: '条件循环节点',
                value: 'while_script',
              },
              {
                label: '退出循环节点',
                value: 'break_script',
              },
            ],
          },
          {
            label: '语言',
            type: 'select',
            required: true,
            name: 'scriptLanguage',
            // "disabled":props.editType==='edit',
            options: [
              {
                label: 'java',
                value: 'java',
              },
              {
                label: 'js',
                value: 'js',
              },
            ],
          },
        ],
      },
      {
        type: 'editor',
        visible: props.editType === 'edit',
        language: `${props.values.scriptLanguage === 'java' ? 'java' : 'javascript'}`,
        label: `脚本数据（${props.values.scriptLanguage}）`,
        name: 'scriptData',
        allowFullscreen: true,
        placeholder: '请在此编写组件脚本',
      },
    ],
  };
  const handleCancel = () => {
    props.handleRsnEditFormOpen(false);
  };

  useEffect(() => {
    console.log('props value----------------------', props.values);
    amisJSON.data = {
      ...props.values,
      pageId: props.pageId,
      scriptData: props.values.scriptData ? props.values.scriptData : '',
    };
  }, [props.rsnEditFormOpen]);

  return (
    <>
      <Modal
        title={props.editType === 'add' ? '新增组件脚本' : '编辑组件脚本'}
        destroyOnClose={true}
        maskClosable={false}
        width={1280}
        open={props.rsnEditFormOpen}
        footer={null}
        closable={true}
        onCancel={handleCancel}
      >
        <ToastComponent key="toast" />
        <AlertComponent key="alert" />
        <div style={{ display: 'block' }}>
          {renderAmis(
            amisJSON,
            {},
            {
              fetcher: fetcher,
              notify: notify,
              alert: alert,
              copy: copy,
            },
          )}
        </div>
      </Modal>
    </>
  );
};

export default RuleScriptNodeEditForm;
